<template>
	<view>
		<u-navbar title="直播详情" :border-bottom="false" back-icon-color="#f1f1f1" title-color="#f1f1f1" :background="navbarBackground"></u-navbar>
		<view class="main" v-if="info !== null">
			<u-image width="100%" height="400" :src="info.banner"></u-image>
			<view class="info">
				<text class="info-title">{{ info.title }}</text>
				<view class="info-sub">
					<text>{{ `直播时间：${info.start_time && info.start_time.slice(0, 16)}` || '' }}</text>
					<text>{{ `观看人数：${pv}` }}</text>
				</view>
			</view>
			<view class="channel" v-if="info.cid !== 0">
				<u-image width="50%" height="200" :src="channel.banner"></u-image>
				<view class="channel-right">
					<view class="more">
						<text>{{ channel.title }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<text>{{ `已更新${count}期` }}</text>
				</view>
			</view>
			<view class="btn"><u-button :custom-style="customStyle" shape="circle" @click="handleToLive">进入直播</u-button></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			customStyle: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1'
			},
			info: null,
			channel: {},
			count: 0,
			pv: 0
		};
	},
	onLoad(option) {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		let id = option.id;
		this.pv = option.pv;
		uni.showLoading({
			title: '正在加载...'
		});

		// 获取话题信息
		this.$u
			.post('/topic/get_info', {
				id: id
			})
			.then(res => {
				this.info = res.dataobj;
				if (this.info.cid) {
					// 获取所属频道信息
					this.getChannelInfo(this.info.cid);
				}
				this.handleToLive()
			});
			// 
	},
	methods: {
		getChannelInfo(id) {
			// 频道信息
			this.$u
				.post('/channel/get_channel_info', {
					cid: id
				})
				.then(res => {
					this.channel = res.dataobj;
				});
			// 更新期数
			this.$u
				.post('/channel/get_channel_topic_list', {
					cid: id
				})
				.then(res => {
					this.count = res.dataobj.length;
				});
		},
		handleToLive() {
			let loginState = uni.getStorageSync('login_state');
			if (loginState) {
				uni.setStorageSync('live', this.info);
				setTimeout(() => {
					uni.navigateTo({
						url: '../live/live'
					});
				}, 50);
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	.info {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		background-color: #fff;

		.info-title {
			display: inline-block;
			padding-bottom: $uni-spacing-col-lg;
			font-size: 1rem;
			color: #587bb9;
		}

		.info-sub {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #999;
			font-size: 9pt;
		}
	}

	.channel {
		display: flex;
		align-items: center;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		margin-top: $uni-spacing-col-sm;
		background-color: #fff;

		.channel-right {
			padding: $uni-spacing-col-lg 0 $uni-spacing-col-lg $uni-spacing-row-sm;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;

			.more {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 1rem;
			}
		}
	}

	.live {
		margin: $uni-spacing-col-base 0;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.live-title {
			font-size: 12pt;
			color: #587bb9;
		}

		.live-content {
			padding: $uni-spacing-col-lg 0;
		}
	}

	.btn {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100vw;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		background-color: #fff;
	}
}
</style>
